<template>
  <div class="app-container">
    <el-form size="small" ref="seatFormData" :model="seat" class="seat-form" label-width="120px" style="width: 900px;" :rules="rule">
      <el-row :gutter="24">
        <el-col :span="16" :offset="6">
          <el-form-item  label="演出场地:" prop="yardName">
            <el-select v-model="seat.yardName" filterable placeholder="请选择演出场地" style="width:100%" @change='changeYard'>
              <el-option
                v-for="yard in yardOptions"
                :key="yard.id"
                :label="yard.name"
                :value="yard.name"
                :disabled="yard.disabled == 1"
              >{{yard.name}}
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="16" :offset="6">
          <el-form-item  label="座位图名称:" prop="seatName">
            <el-input v-model="seat.seatName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="16" :offset="6">
          <el-form-item  label="座位数：">
            <el-input v-model="seat.row" @input="rowInput" type="number" style="width:45%"></el-input>&nbsp;行
            <el-input v-model="seat.column" type="number" @input="columnInput" style="width:46%"></el-input>&nbsp;列
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="16" :offset="6">
          <el-form-item>
            <el-button @click="submitSeats" style="width:100%">确定</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div v-if="isshowseat">
      <el-row :gutter="24">
        <el-col :span="16" :offset="3">
          <el-form size="small" :inline="true"  class="seat-form" >
            <!--                <el-form-item>-->
            <!--                    <div>-->
            <!--                        <el-radio v-model="SeatRadio" label="1" border>画座位</el-radio>-->
            <!--                        <el-radio v-model="SeatRadio" label="2" border>编号码</el-radio>-->
            <!--                        <el-button type="text" v-if="SeatRadio=='2'" @click="selectAll">全选</el-button>-->
            <!--                    </div>-->

            <!--                </el-form-item>-->
            <el-form-item label="画布大小:" style="margin-left:159px;" label-width="76px">
              <span class="dec-text">{{seat.row}}*{{seat.column}}</span>
            </el-form-item>
            <el-form-item label="座位数量:" style="margin-left:18px;" label-width="76px">
              <span class="dec-text">{{SeatNumber}}</span>
            </el-form-item>
            <!--                <el-form-item label="选中数量:" style="margin-left:18px;margin-right:50px;" label-width="76px">-->
            <!--                  <span class="dec-text">{{selectNumber}}</span>-->
            <!--                </el-form-item>-->
            <el-form-item>
              <el-button type="primary" @click="submit">保存</el-button>
              <el-button @click="cancelAdd">取消</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <!-- 座位图 -->
    <el-row :gutter="24">
      <el-col :span="16" :offset="4">
        <div class="seat-main-content" @mousedown.prevent="mousedown" @mouseup.prevent="mouseup" @mousemove.prevent="mousemove" ref="seatDraw" id="seatDraw">
          <ul class="seat-list-content"  v-for="(itemList) in seatArray" :key="itemList.row" :style="{ width: oWith+'px' }">
            <li class="seat-list-item" v-for="(item) in itemList.child" :key="item.column" @click="chooseSeat(itemList,item)" >
                    <span :style="[item.status == 0 ? noShow:isShow]">
                      <img src="./img/seatImg.svg" style="width:20px;height:20px;margin-top: 5px" class="image">
                      <!--                        <i :class="[item.status == 1 ? 'el-icon-folder':'el-icon-folder-checked']" ></i>-->
                    </span>
              <!-- <span class="el-icon-s-ticket"> -->
              <!-- <i class="el-icon-s-ticket" v-show="item.status == 1"></i> -->
              <!-- </span> -->
            </li>
          </ul>
          <div ref="moveSelected" class="drag-box"></div>
        </div>
      </el-col>
    </el-row>
    <!-- 座位编号 -->
    <!--        <div class="deploy-number" v-if="SeatRadio == '2'">-->
    <!--            <el-form size="small" ref="deployForm" class="seat-form" :model="rowForm" >-->
    <!--                <h2>排（纵向）编号规则</h2>-->
    <!--                <el-form-item label="方向:" label-width="50px">-->
    <!--                    <el-select v-model="rowForm.directionValue" placeholder="请选择">-->
    <!--                        <el-option-->
    <!--                            v-for="item in directionRow"-->
    <!--                            :key="item.value"-->
    <!--                            :label="item.label"-->
    <!--                            :value="item.value"-->
    <!--                            >-->
    <!--                        </el-option>-->
    <!--                    </el-select>-->
    <!--                </el-form-item>-->
    <!--                <el-form-item label="前缀:" label-width="50px">-->
    <!--                    <el-input v-model="rowForm.prefix" ></el-input>-->
    <!--                </el-form-item>-->
    <!--                <el-form-item label="起始:" label-width="50px">-->
    <!--                    <el-input v-model="rowForm.start" ></el-input>-->
    <!--                </el-form-item>-->
    <!--                <el-form-item label="增量:"  label-width="50px">-->
    <!--                    <el-input v-model="rowForm.incr" ></el-input>-->
    <!--                </el-form-item>-->
    <!--                <h2>列（横向）编号规则</h2>-->
    <!--                <el-form-item label="方向:"  label-width="50px">-->
    <!--                    <el-select v-model="columnForm.directionValue" placeholder="请选择">-->
    <!--                        <el-option-->
    <!--                            v-for="item in directionColumn"-->
    <!--                            :key="item.value"-->
    <!--                            :label="item.label"-->
    <!--                            :value="item.value">-->
    <!--                        </el-option>-->
    <!--                    </el-select>-->
    <!--                </el-form-item>-->
    <!--                <el-form-item label="前缀:"  label-width="50px">-->
    <!--                    <el-input v-model="columnForm.prefix" ></el-input>-->
    <!--                </el-form-item>-->
    <!--                <el-form-item label="起始:"  label-width="50px">-->
    <!--                    <el-input v-model="columnForm.start" ></el-input>-->
    <!--                </el-form-item>-->
    <!--                <el-form-item label="增量:"  label-width="50px">-->
    <!--                    <el-input v-model="columnForm.incr" ></el-input>-->
    <!--                </el-form-item>-->
    <!--                <el-form-item>-->
    <!--                    <el-button type="primary" @click="submitSeatSerial">确定</el-button>-->
    <!--                    <el-button icon="el-icon-refresh-right" @click="rest">清空</el-button>-->
    <!--                </el-form-item>-->
    <!--            </el-form>-->
    <!--        </div>-->
  </div>
</template>
<script>
  import {replaceSpacesObj} from "@/utils/webUtils";

  export default {
    name:'addSeat',
    data(){
      return{
        yardOptions:[],
        districtList: [{ value: '1', label: '文化馆-一层' }],
        directionRow: [{ value: '0', label: '从上到下'},{ value: '1', label: '从下往上'}],
        directionColumn: [{ value: '0', label: '从左到右'},{ value: '1', label: '从右到左' }],
        SeatRadio:'1',
        isshowseat:false,
        seatArray:[],
        seat:{
          yardName:'',
          yardId:'',
          seatName:'',
          seatCount:'',
          redact:'1',
          row:'',
          column:''
        },
        rowLen:25,
        columnLen:25,
        oWith:900,
        rowForm:{
          directionValue:'0',//方向
          prefix:'排',//前缀
          start:'1',//起始
          incr:'1'//增量
        },
        columnForm:{
          directionValue:'0',
          prefix:'列',
          start:'1',
          incr:'1'
        },
        isShow:{
          opacity:1
        },
        noShow:{
          opacity:0
        },
        SeatNumber:0,
        selectNumber:0,
        rule:{
          seatName: [
            { required: true, message: '请输入座位图名称', trigger: 'blur' },
            { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
            {
              required: true,
              pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
              message: '不支持特殊字符',
              trigger: 'blur'
            }
          ],
          yardName: [
            { required: true, message: '请选择演出场地', trigger: 'blur' },
          ],
        },
        flag: false,
        x: 0,
        y: 0,
        pageX:0,
        pageY:0

      }
    },
    created() {
      this.queryYard()
    },
    methods: {
      // 演出场地查询
      queryYard() {
        this.axios
          .request({
            method: 'get',
            url: './tck/seat/optionalStudio',
            params: {}
          })
          .then(response => {
            this.yardOptions = response.data.data
          })
          .catch(error => {
            console.log(error)
          })
      },
      changeYard() {
        this.yardOptions.forEach(list => {
          if (list.name === this.seat.yardName) {
            this.seat.yardName = list.name
            this.seat.yardId = list.id
          }
        })
      },
      submit(){
        let number=0
        this.seatArray.map(itemList =>{
          itemList.child.map(item =>{
            if(item.status == 1){
              number++;
            }
          })
        })
        this.$refs['seatFormData'].validate((valid) => {
          if (!valid) {
            return ;
          }
          this.seat = replaceSpacesObj(this.seat)
          this.axios.request({
            method: 'post',
            url: './tck/seat/save',
            headers: {
              'Content-Type': 'application/json;charset=UTF-8'
            },
            data: {
              yardName: this.seat.yardName,
              yardId: this.seat.yardId,
              seatName: this.seat.seatName,
              seat:JSON.stringify(this.seatArray),
              seatCount:number,
              seatRow:this.seat.row,
              seatCol:this.seat.column

            }
          }).then(() => {
            this.$notify({
              title: '提示',
              message: '座位添加成功！',
              type: 'success'
            });
            this.$router.push('/seat')

          }).catch(error => {
            this.$notify({
              title: '提示',
              message: '座位添加失败！' + error,
              type: 'error'
            });
          })
        })
      },
      cancelAdd(){
        this.$router.push('/seat')
        this.initSeat()
      },
      initSeat(){
        this.seat = {
          yardName:'',
          yardId:'',
          seatName:'',
          seatCount:'',
          row:'',
          column:''
        }

      },
      // 添加区域
      // addDistrict() {
      //     let districtList = this.districtList;
      //     let len = districtList.length + 2;
      //     this.districtList.push({ value:len, label:'自定义' });
      // },
      rowInput() {
        this.rowLen = Number(this.seat.row);
        // this.recombine();
      },
      submitSeats(){
        this.$refs.seatFormData.validate(valid => {
          if (valid) {
            //如果通过验证 to do...
            this.isshowseat = true;
            this.recombine();
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      // 创建座位数据
      recombine(){
        let arrays = [];
        let rowLen = this.rowLen;
        let columnLen = this.columnLen;
        // this.SeatNumber = rowLen*columnLen;
        for(let i = 1; i < rowLen + 1; i++){
          // arrays.push();
          let rowObj = {row:i,child:[]};
          for(let m = 1;m <columnLen + 1;m++){
            rowObj.child.push({row:i,column:m,status:0});
          }
          arrays.push(rowObj)
        }
        this.seatArray = arrays;
      },
      columnInput() {
        this.columnLen = Number(this.seat.column);
        this.oWith = Number(this.seat.column)*32>900?Number(this.seat.column)*32:900;
        // this.recombine();
      },
      // 改变座位图状态
      chooseSeat(row,column) {
        let arrays = this.seatArray;
        let number = 0;
        if(this.SeatRadio == '1'){
          arrays.map(itemList =>{
            itemList.child.map(item =>{
              if(item.row == column.row && item.column == column.column){
                item.status = item.status == 0 ? 1 : 0;
              }
              if(item.status == 1){
                number++;
              }
            })
          })
          this.selectNumber = number;
          this.SeatNumber = number
        }else{
          arrays.map(itemList =>{
            itemList.child.map(item =>{
              if(item.row == column.row && item.column == column.column && item.status != 0){
                item.status = item.status == 1 ? 3 : 1;
              }
            })
          })
        }
      },
      // selectAll(){
      //     let arrays = this.seatArray;
      //     arrays.map(itemList =>{
      //         itemList.child.map(item =>{
      //             if(item.status != 0){
      //                 item.status =  3;
      //             }
      //         })
      //     })
      //     this.seatArray = arrays;
      // },
      rest(){
        // this.$refs.deployForm.resetFields()
        this.rowForm ={
          directionValue:'0',//方向
          prefix:'排',//前缀
          start:'1',//起始
          incr:'1'//增量
        };
        this.columnForm = {
          directionValue:'0',
          prefix:'列',
          start:'1',
          incr:'1'
        };

      },
      // 给已选座位编号
      submitSeatSerial(){
        let arrays = this.seatArray;
        if(this.rowForm.directionValue == 0 && this.columnForm.directionValue == 0){
          let row = 1;
          for(let i = 0;i<arrays.length;i++){
            let columnData = arrays[i].child;
            let column = 1;
            let flag = false;
            for(let j=0;j<columnData.length;j++){
              if(columnData[j].status == 3){
                flag = true;
                columnData[j].id = row +'排'+column++ +'列'
              }
            }
            if(flag){
              row++;
              flag = false;
            }
          }
        }else if(this.rowForm.directionValue == 0 && this.columnForm.directionValue == 1){
          let row = 1;
          for(let i = 0;i< arrays.length;i++){
            let columnData = arrays[i].child;
            let column = 1;
            let flag = false;
            for(let j=columnData.length-1;j>0;j--){
              if(columnData[j].status == 3){
                flag = true;
                columnData[j].id = row +'排'+ column++ +'列'
              }
            }
            if(flag){
              row++;
              flag = false;
            }
          }
        }
        else if(this.rowForm.directionValue == 1 && this.columnForm.directionValue == 0){
          let row = 1;
          for(let i = arrays.length-1;i>0;i--){
            let columnData = arrays[i].child;
            let column = 1;
            let flag = false;
            for(let j=0;j<columnData.length;j++){
              if(columnData[j].status == 3){
                flag = true;
                columnData[j].id = row +'排'+ column++ +'列'
              }
            }
            if(flag){
              row++;
              flag = false;
            }
          }
        }
        else if(this.rowForm.directionValue == 1 && this.columnForm.directionValue == 1){
          let row = 1;
          for(let i = arrays.length-1; i>0 ;i--){
            let columnData = arrays[i].child;
            let column = 1;
            let flag = false;
            for(let j=columnData.length-1;j>0;j--){
              if(columnData[j].status == 3){
                flag = true;
                columnData[j].id = row +'排'+ column++ +'列'
              }
            }
            if(flag){
              row++;
              flag = false;
            }
          }
        }
      },
      // @mousedown="mousedown" @mouseup="mouseup" @mousemove="mousemove"
      mousedown(e){
        e.stopPropagation();
        if(this.SeatRadio != '1') return;
        this.flag = true;
        if(e.target.offsetWidth < this.oWith){
          this.x = e.target.offsetLeft; // 鼠标落下时的X
          this.y = e.target.offsetTop; // 鼠标落下时的Y
          this.$refs.moveSelected.style.top = e.target.offsetTop + 'px';
          this.$refs.moveSelected.style.left = e.target.offsetLeft + 'px';
        }
      },
      mouseup(e){
        if(this.SeatRadio != '1') return;
        this.flag = false;
        let endX = e.target.offsetLeft;
        let endY = e.target.offsetTop;
        let startX = this.x;
        let StartY = this.y;
        let minX = startX > endX ? endX : startX;
        let maxX = startX > endX ? startX : endX;
        let minY = StartY > endY ? endY : StartY;
        let maxY = StartY > endY ? StartY : endY;
        let array = this.seatArray;
        if(e.target.offsetWidth < this.oWith){
          array.map(ulItem =>{
            ulItem.child.map(item =>{
              let column = item.column * 31;
              let column2 = (item.column-1) * 31;
              let rowTop = item.row * 31;
              let rowBottom = (item.row - 1)*31;
              if(column > (minX-20) && rowTop > minY && column2 < (maxX-20) && rowBottom < maxY){
                item.status = 1;
              }
            })
          })
        }
        this.$refs.moveSelected.style.width = 0;
        this.$refs.moveSelected.style.height = 0;
        let number=0
        this.seatArray.map(itemList =>{
          itemList.child.map(item =>{
            if(item.status == 1){
              number++;
            }
          })
        })
        this.SeatNumber = number
        // console.log(allLis)
        // console.log(e)
      },
      mousemove(e){
        if(this.SeatRadio != '1') return;
        this.drawRect(e);
      },
      drawRect(e){
        let startX = this.x;
        let StartY = this.y;
        let endX = e.target.offsetLeft;
        let endY = e.target.offsetTop;
        if(this.flag){
          if(startX < endX && StartY < endY){
            this.$refs.moveSelected.style.width = endX - startX + 4 + 'px';
            this.$refs.moveSelected.style.height = endY - StartY + 2 + 'px';
          }
          else if(startX > endX && StartY < endY){
            this.$refs.moveSelected.style.left = endX +'px';
            this.$refs.moveSelected.style.width = startX - endX + 4 + 'px';
            this.$refs.moveSelected.style.height = endY - StartY + 2 + 'px';
          }else if(startX < endX && StartY > endY){
            this.$refs.moveSelected.style.top = endY +'px';
            this.$refs.moveSelected.style.width = endX - startX + 4 + 'px';
            this.$refs.moveSelected.style.height = StartY - endY + 2 + 'px';
          }else if(startX > endX && StartY > endY){
            this.$refs.moveSelected.style.top = endY +'px';
            this.$refs.moveSelected.style.left = endX +'px';
            this.$refs.moveSelected.style.width = startX - endX + 4 + 'px';
            this.$refs.moveSelected.style.height = StartY - endY + 2 + 'px';
          }else{
            this.$refs.moveSelected.style.width = endX - startX + 4 + 'px';
            this.$refs.moveSelected.style.height = endY - StartY + 2 + 'px';
          }

        }
      }
    }
  }
</script>
<style lang="scss" scoped rel="stylesheet/scss">

  .app-container{

    overflow: auto;
    ul{
      margin: 0;
    }
    ul,li{
      list-style: none;
      padding: 0;
    }
    .el-form-item__label{
      height:19px;
      font-size:14px;
      font-family:'Microsoft YaHei';
      font-weight:400;
      line-height:19px;
      color:rgba(23,23,23,1);
      opacity:1;
    }
    .dec-text{
      border-bottom: 1px solid #dcdfe6;
      padding: 0 15px;
      font-size: 14px;
      line-height: 19px;
    }
    .form2-box{
      padding-left: 20px;
    }
    .seat-main-content{
      position: relative;
      // border: 1px solid rgba(112,112,112,1);
      border-bottom: none;
      // min-width: 1800px;
      // width: 2000px;
      padding: 0 20px 20px;
      // overflow: auto;
    }
    .seat-list-content{
      width: 100%;
      width: 3220px;
      // float: left;
      // border-bottom: 1px solid rgba(112,112,112,1);
      border-left:1px solid #afa9a9;
      // border-top:1px solid rgba(112,112,112,1);
      // border-right:1px solid rgba(112,112,112,1);
      // &:last-of-type{
      //     border-bottom: 1px solid rgba(112,112,112,1);
      // }
      // &:first-of-type{
      //     border-top: 1px solid rgba(112,112,112,1);
      // }
      // white-space: nowrap;
      &:first-of-type>li{
        border-top: 1px solid #afa9a9;;
      }

    }
    .seat-list-item{
      width: 32px;
      height: 32px;
      // float: left;
      display:inline-block;
      text-align: center;
      line-height: 30px;
      color: #afa9a9;
      font-size: 16px;
      border-right: 1px solid #afa9a9;;
      border-bottom: 1px solid #afa9a9;;
      margin-right: -1px;
      margin-bottom: -1px;
      cursor: pointer;
      &:hover{
        color:deepskyblue;
      }
    }
    .deploy-number{
      width: 190px;
      height: 480px;
      background: #fff;
      box-shadow:0px 3px 6px rgba(135,136,168,0.16);
      position:fixed;
      right: 0;
      bottom: 0;
      padding: 10px;
      .el-form-item--small.el-form-item{
        margin-bottom: 10px;
      }
      h2{
        padding-left: 8px;
        // width:108px;
        height:16px;
        font-size:14px;
        font-family:Microsoft YaHei;
        font-weight:400;
        line-height:16px;
        color:rgba(23,23,23,1);
        opacity:1;
      }
      .no-show{
        opacity: 0;
      }
      .is-show{
        opacity:1;
      }
    }
    .drag-box{
      position: absolute;
      background-color: rgba(0,0,0,.5);
      border: 1px dashed #fff;
      width: 0;
      height: 0;
      z-index: 999;
    }

  }

</style>
